<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(carousel, index) in list"  :key="carousel.id">
        <img :src="carousel.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
//引入swiper
import Swiper from "swiper"
export default {
  //使用swiper  1.引包(js和css) 2.创建页面结构 3.new swiper 实例
  name: "Carousel",
  props:["list"],
  watch:{
        list:{
            immediate:true,//立即监听
            //list监听不到是因为这个数据从来没变过,是父亲给的一个从来没变过的对象
            handler(){
                //只能监听到有数据了，但是v-for动态渲染结构还没有办法确定，因此还是要用到nextTick
                 //为了与后面轮播图代码风格一样
//       immediate:true,
//        //用watch和nextTick配合完成实例化Swiper
//        handler(newValue,oldValue){//这两个参数是handler函数自带的
//            //当执行handler方法时，代表组件实例身上数据已经有了[数组：四个元素]
//            //但是不能保证v-for已经执行完毕,v-for完毕，页面结构才完整
//            //nextTick：在下次DoM更新 循环结束后 执行延迟回调。在修改数据之后立即使用这个方法获取更新后的DOM
//            this.$nextTick(()=>{
//                //当你执行这个回调的时候：保证服务器数据回来了，v-for也执行完毕了
                this.$nextTick(()=>{
                               var mySwiper = new Swiper ('.swiper-container', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      //点击小球的时候也切换图片
      clickable:true
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    // scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
  })
                })
            }
        }
    }
};
</script>

<style scoped>
</style>